<template>
  <div>
    <navTop></navTop>
    <div id="pd">
      <ul class="news-list">
        <li v-for="item in newsList" :key="item.uniquekey" @click="goDet(item.url)">
          <h3>{{item.title}}</h3>
          <div class="news-img">
            <img v-lazy="item.thumbnail_pic_s" alt="">
            <img v-lazy="item.thumbnail_pic_s02" alt="">
            <img v-lazy="item.thumbnail_pic_s03" alt="">
          </div>
          <p><span>{{item.author_name}}</span><span>{{item.date}}</span></p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import getNews from "@/api/New.js"
import navTop from '@/components/common/navTop'
export default {
  data () {
    return {
      newsList:""
    }
  },

  components: {
    navTop
  },
  created(){
    this.getnews()
  },
  methods: {
    async getnews(){
      try{
        let p = await getNews.getNews();
        if(p.data.flag){
          this.newsList = p.data.data;
        }
      }catch(err){
        this.$toast.fail(err+"")
      }

    },
    goDet(url){
      window.location=url
    }
  }
}
</script>

<style lang="scss" scoped>
.news-list{
  padding: 10px 3%;
  li{
    width: 100%;
    min-height: 100px;
    padding: 3px 0 6px 0;
    border-bottom: 1px solid #cccccc;
    margin-bottom: 10px;
    h3{
      font-size: 14px;
      color: #464646;
      text-align: left;
      margin-bottom: 5px;
    }
    .news-img{
      width: 100%;
      display: flex;
      justify-content: space-between;
      img{
        width: 32%;
        height: 80px;
      }
    }
    p{
      height: 18px;
      line-height: 26px;
      text-align:left;
      span{
        margin-right: 16px;
      }
    }
  }
}
</style>